<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <table id='historyGrid' lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="leaseTpl">
  {{layui.util.toDateString(new Date(d.start_time).getTime(), "yyyy-MM-dd") }}
  {{# if(d.end_time){ }}
    - {{layui.util.toDateString(new Date(d.end_time).getTime(), "yyyy-MM-dd") }}
  {{# } else { }}
  {{# }}}
</script>

<script>
  layui.use(['layer', 'table', 'form'], function () {
    var layer = layui.layer
      , form = layui.form
      , table = layui.table;

    // 首次加载
    table.render({
      elem: '#historyGrid'
      , height: 'full'
      , url: './queryHistory.html' //数据接口
      , toolbar: '#toolbarDemo'
      , defaultToolbar: ['filter']
      , where: { //设定异步数据接口的额外参数，任意设
        number_id: {$number_id},
        property_id: {$property_id},
        tenant_id: {$tenant_id}
      }
      , page: true //开启分页
      , cols: [[ //表头
        { field: 'property_name', title: '房产' }
        , { field: 'number_name', title: '房号' }
        , { field: 'lease', title: '租期', templet: '#leaseTpl', minWidth: 170, width: 170 }
        , { field: 'electricity_meter_this_month', title: '本月电表度数	' }
        , { field: 'electricity_consumption', title: '用电量' }
        , { field: 'electricity', title: '电费', hide: true }
        , { field: 'water_meter_this_month', title: '本月水表度数	' }
        , { field: 'water_consumption', title: '用水量' }
        , { field: 'water', title: '水费', hide: true }
        , { field: 'rental', title: '租金', hide: true }
        , { field: 'deposit', title: '押金', hide: true }
        , { field: 'garbage_fee', title: '垃圾费', hide: true }
        , { field: 'other_charges', title: '其他费用', hide: true }
        , { field: 'total_money', title: '总金额' }
        , { field: 'note', title: '备注' }
      ]]
    });

  });
</script>